<template>
  <div class="income">
    <van-sticky :offset-top="0">
      <div class="header">收益</div>
    </van-sticky>
    <div class="content">
      <van-tabs v-model="active" @change="changeContent">
        <van-tab v-for="(t, index) of title" :title="t" :key="index">
          <van-cell-group inset>
            <van-cell
              v-for="(apply, index) in realAccountApply"
              :key="index"
              value="内容"
            >
              <template #title>
                <div v-if="apply.applyType === '提现'" class="custom-title">
                  {{ apply.applyType }} - 到银行卡
                </div>
                <div v-else class="custom-title">
                  从银行卡 {{ apply.applyType }}
                </div>
              </template>
              <template #default>
                <div class="custom-title">¥ {{ apply.money }}</div>
                <div>
                  <van-tag v-if="apply.status === '通过'" type="success">{{
                    apply.status
                  }}</van-tag>
                  <van-tag
                    v-else-if="apply.status === '不通过'"
                    type="danger"
                    >{{ apply.status }}</van-tag
                  >
                  <van-tag v-else type="warning">{{ apply.status }}</van-tag>
                </div>
              </template>
              <template #label>
                <span>{{ apply.applyTime | fmtTime }}</span>
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      active: 0,
      list: {
        page: 1,
        pageSize: 100,
        userId: +localStorage.getItem("userId"),
      },
      title: ["全部", "提现"],
      realAccountApply: this.accountApply,
    };
  },
  computed: {
    ...mapState("myIncome", ["accountApply"]),
  },
  methods: {
    ...mapActions("myUser", ["getUserInfo"]),
    ...mapActions("myIncome", ["getAccountApply"]),
    // 改变状态
    changeContent() {
      if (this.title[this.active] === "提现") {
        this.realAccountApply = this.realAccountApply.filter((item) => {
          return item.applyType === "提现";
        });
      } else {
        this.realAccountApply = this.accountApply;
      }
    },
  },
  created() {
    this.getUserInfo();
    this.getAccountApply(this.list);
    setTimeout(() => {
      this.realAccountApply = this.accountApply;
    }, 200);
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.4em;
}
</style>